<template>
    <div class="screen-bg-style" :style="{ 'background-color': bgColor, color: textColor }" element-loading-background="rgba(0, 0, 0, 0.2)" v-loading="loaded">
        <div class="flex q-pl-md" style="padding-left: 16px; background-color: #fff; align-items: center">
            <el-button type="text" icon="el-icon-arrow-left" @click="goBack()">返回</el-button>
            <div class="q-ml-md" style="margin-left: 24px">
                <el-form class="expert-form" :model="queryParams" ref="queryForm" size="mini" inline>
                    <el-form-item label="店铺" prop="shop_id">
                        <el-select v-model="queryParams.shop_id" placeholder="请选择" clearable size="small" style="width: 240px" @click="changeShop">
                            <el-option v-for="(dict, index) in shopList" :key="index" :label="dict.label" :value="dict.value" />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="时间" prop="customDate">
                        <el-radio-group v-model="queryParams.customDate" @change="changeCustomDate">
                            <el-radio-button :label="1">上周</el-radio-button>
                            <el-radio-button :label="2">本月</el-radio-button>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="合作时间" prop="cooperate_time">
                        <el-date-picker
                            v-model="queryParams.cooperate_time"
                            format="yyyy-MM-dd"
                            type="daterange"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            style="width: 240px"
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item label="建联人" prop="fb_admin_id">
                        <SelectPage
                            v-model="queryParams.fb_admin_id"
                            placeholder="请选择"
                            :url="$api.purchase.getPurchaserList"
                            show_field="username"
                            show_id="operater_id"
                            query_field="keyword"
                            filterable
                            clearable
                            popper-class="custom-select"
                            style="width: 240px"
                        ></SelectPage>
                    </el-form-item>

                    <el-form-item label=" ">
                        <el-button type="primary" icon="el-icon-search" @click="getData">搜索</el-button>
                        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="q-pa-md full-width" style="overflow-y: auto; height: calc(100vh - 36px)">
            <el-row :gutter="16" class="q-mb-md">
                <el-col :span="24" :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
                    <BoxCard :shop_id="shop_id" class="card-item q-pa-md" @click="showDetail(1)">
                        <span slot="title" class="gradient-title">总合作素材数量</span>
                        <div class="card-item-title q-pa-sm">{{ model.all_cooperate_nums }}</div>
                    </BoxCard>
                </el-col>
                <el-col :span="24" :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
                    <BoxCard :shop_id="shop_id" class="card-item q-pa-md" @click="showDetail(2)">
                        <span slot="title" class="gradient-title">{{ queryParams.customDate == 1 ? '上周' : '本月' }}合作素材条数</span>
                        <div class="card-item-title q-pa-sm">{{ model.time_cooperate_nums }}</div>
                    </BoxCard>
                </el-col>
                <el-col :span="24" :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
                    <BoxCard :shop_id="shop_id" class="card-item q-pa-md" @click="showDetail(3)">
                        <span slot="title" class="gradient-title">{{ queryParams.customDate == 1 ? '上周' : '本月' }}素材回收进度</span>

                        <PercentBack class="small" :shop_id="shop_id" :chartData="model.video_cooperate_nums_array" :annotation="month_cooperate_rate" slot="default"></PercentBack>
                    </BoxCard>
                </el-col>
                <el-col :span="24" :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
                    <BoxCard :shop_id="shop_id" class="card-item q-pa-md" @click="showDetail(4)">
                        <span slot="title" class="gradient-title">{{ queryParams.customDate == 1 ? '上周' : '本月' }}合作人数</span>
                        <div class="card-item-title q-pa-sm">{{ model.cooperate_persons_nums }}</div>
                    </BoxCard>
                </el-col>
            </el-row>
            <el-row :gutter="16" class="q-mb-md">
                <el-col :span="8" :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
                    <BoxCard :shop_id="shop_id" class="card-item q-pa-md q-mb-md" @click="showDetail(5)">
                        <span slot="title" class="gradient-title">未发布超时达人</span>
                        <div class="card-item-title q-pa-sm">{{ model.out_persons }}</div>
                    </BoxCard>
                    <BoxCard :shop_id="shop_id" class="card-item q-pa-md" @click="showDetail(6)">
                        <span slot="title" class="gradient-title">合作方式比例</span>
                        <ThetaCooperation :shop_id="shop_id" class="small" :chartData="model.cooperate_type_array" slot="default"></ThetaCooperation>
                    </BoxCard>
                </el-col>
                <el-col :span="16" :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
                    <BoxCard :shop_id="shop_id" class="card-item q-pa-md">
                        <span slot="title" class="gradient-title">{{ queryParams.customDate == 1 ? '上周' : '本月' }}合作达人物流情况</span>
                        <SalesLogistics :shop_id="shop_id" :chartData="model.fulfillment_status_array" slot="default" @barClick="logBarClick"></SalesLogistics>
                    </BoxCard>
                </el-col>
            </el-row>
            <el-row :gutter="16" class="q-mb-md">
                <el-col class="q-mb-md" :span="24" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <BoxCard :shop_id="shop_id" class="card-item q-pa-md">
                        <span slot="title" class="gradient-title">各建联品素材条数</span>
                        <PopulationSpu class="full" :shop_id="shop_id" :chartData="model.sku_cooperate" slot="default" @barClick="barClick"></PopulationSpu>
                    </BoxCard>
                </el-col>
                <!-- <el-col class="q-mb-md" :span="24" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <BoxCard :shop_id="shop_id" class="card-item q-pa-md" @click="showDetail(8)">
                        <span slot="title" class="gradient-title">各建联品待回收素材条数</span>
                        <PopulationWaiting class="full" :shop_id="shop_id" :chartData="model.sku_cooperate_pre" slot="default"></PopulationWaiting>
                    </BoxCard>
                </el-col>
                <el-col class="q-mb-md" :span="24" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <BoxCard :shop_id="shop_id" class="card-item q-pa-md" @click="showDetail(9)">
                        <span slot="title" class="gradient-title">各建联品已回收素材条数</span>
                        <PopulationDone class="full" :shop_id="shop_id" :chartData="model.sku_cooperate_complete" slot="default"></PopulationDone>
                    </BoxCard>
                </el-col> -->
                <!-- <el-col :span="24" :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <BoxCard :shop_id="shop_id" class="card-item q-pa-md">
                        <span slot="title" class="gradient-title">上周建联品素材回收情况</span>
                        <PopulationBackPro :chartData="waitingInfo" slot="default"></PopulationBackPro>
                    </BoxCard>
                </el-col>
                <el-col :span="24" :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <BoxCard :shop_id="shop_id" class="card-item q-pa-md">
                        <span slot="title" class="gradient-title">上周回收素材情况</span>
                        <PopulationBack :chartData="waitingInfo" slot="default"></PopulationBack>
                    </BoxCard>
                </el-col> -->
            </el-row>
            <!-- <el-row :gutter="16">
                <el-col :span="24" :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
                    <BoxCard class="card-item q-pa-md q-mb-md">
                        <span slot="title" class="gradient-title">周度合作素材数</span>
                        <div class="card-item-title q-pa-sm">15</div>
                    </BoxCard>
                    <BoxCard :shop_id="shop_id" class="card-item q-pa-md">
                        <span slot="title" class="gradient-title">周度合作人数</span>
                        <div class="card-item-title q-pa-sm">7</div>
                    </BoxCard>
                </el-col>
                <el-col :span="24" :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
                    <BoxCard :shop_id="shop_id" class="card-item q-pa-md">
                        <span slot="title" class="gradient-title">上周达人物流情况</span>
                        <SalesLogisticsWeek :chartData="logInfo" slot="default"></SalesLogisticsWeek>
                    </BoxCard>
                </el-col>
                <el-col :span="24" :xs="24" :sm="10" :md="10" :lg="10" :xl="10">
                    <BoxCard :shop_id="shop_id" class="card-item q-pa-md">
                        <span slot="title" class="gradient-title">上周素材合作spu</span>
                        <SalesSpu :chartData="logInfo" slot="default"></SalesSpu>
                    </BoxCard>
                </el-col>
            </el-row> -->
        </div>
        <detail-dialog v-model="detailDialog.visible" v-if="detailDialog.visible" :type="detailDialog.type" :spu="detailDialog.spu" :query="detailDialog.query"></detail-dialog>
    </div>
</template>

<script>
import BoxCard from './components/BoxCard'
import StoreSalesRanking from './components/StoreSalesRanking'
import PercentBack from './components/PercentBack'
import ThetaCooperation from './components/ThetaCooperation'
import SalesLogistics from './components/SalesLogistics'
import SalesLogisticsWeek from './components/SalesLogisticsWeek'
import SalesSpu from './components/SalesSpu'
import PopulationWaiting from './components/PopulationWaiting'
import PopulationDone from './components/PopulationDone'
import PopulationSpu from './components/PopulationSpu'
import PopulationBack from './components/PopulationBack'
import PopulationBackPro from './components/PopulationBackPro'
import DetailDialog from './components/DetailDialog.vue'
import { getShop, getCooperateList } from '@/api/expert'

export default {
    name: 'data-screen',
    components: {
        BoxCard,
        PercentBack,
        ThetaCooperation,
        StoreSalesRanking,
        SalesLogistics,
        SalesLogisticsWeek,
        SalesSpu,
        PopulationWaiting,
        PopulationDone,
        PopulationBack,
        PopulationBackPro,
        DetailDialog,
        PopulationSpu,
    },
    data() {
        return {
            loaded: false,
            model: {},
            queryParams: {
                shop_id: parseInt(this.$route.query.shop_id),
                customDate: 2,
                cooperate_time: [],
                fb_admin_id: '',
            },
            shopList: [],
            shop_id: this.$route.query.shop_id,
            month_cooperate_rate: '',
            detailDialog: {
                visible: false,
                type: '',
                spu: '',
                query: {},
            },
        }
    },
    computed: {
        bgColor() {
            return this.shop_id == 18 ? '#c623c0' : 'rgb(109, 78, 163)'
        },
        textColor() {
            return this.shop_id == 18 ? '#333' : '#fff'
        },
    },
    async created() {
        this.loading = true
        try {
            const result = await getShop()
            this.shopList = result?.data ?? []
        } catch (error) {
            console.log(error)
            this.loading = false
        }
        this.getData()
        // setInterval(() => {
        //     this.getData('refresh')
        // }, 3000)
    },
    methods: {
        logBarClick(data) {
            this.showDetail(7)
            const map={
                待发货: 1,
                运输中: 2,
                已签收: 3,
                物流异常: 4
            }
            this.detailDialog.query.fulfillment_status = map[data.type]
        },
        barClick({ type, spu }) {
            this.showDetail(type, spu)
        },
        showDetail(type, spu = '') {
            this.detailDialog.visible = true
            this.detailDialog.type = type
            this.detailDialog.spu = spu
            this.detailDialog.query = this.queryParams
        },
        resetQuery() {
            this.$refs.queryForm.resetFields()
        },
        changeShop() {
            // this.$nextTick(()=>{
            //     this.getData()
            // })
        },
        changeCustomDate() {
            this.queryParams.cooperate_time = []
            this.getData()
        },
        goBack() {
            // this.$router.go(-1)
            // 检查是否存在 opener 窗口
            if (window.opener) {
                // 聚焦到父窗口
                window.opener.focus()
                // 关闭当前窗口
                window.close()
            } else {
                // 如果没有 opener，则导航到指定页面
                window.location.href = '/' // 或其他默认页面
            }
        },
        getData() {
            this.loaded = true
            getCooperateList(this.queryParams)
                .then(res => {
                    this.model = res.data
                    this.shop_id = this.queryParams.shop_id
                    const { month_cooperate_sums, video_cooperate_nums, month_cooperate_rate } = this.model.video_cooperate_nums_arr
                    this.model.video_cooperate_nums_array = [
                        { item: '当前', count: video_cooperate_nums, percent: parseFloat(parseFloat(video_cooperate_nums / (month_cooperate_sums + video_cooperate_nums)).toFixed(2)) },
                        { item: '目标', count: month_cooperate_sums, percent: parseFloat(parseFloat(month_cooperate_sums / (month_cooperate_sums + video_cooperate_nums)).toFixed(2)) },
                    ]
                    this.month_cooperate_rate = month_cooperate_rate
                    const { cooperate_type_10, cooperate_rate_10, cooperate_type_pay, cooperate_rate } = this.model.cooperate_type_arr
                    this.model.cooperate_type_array = [
                        { type: '10%佣金', value: cooperate_type_10, percent: cooperate_rate_10 },
                        { type: '付费合作', value: cooperate_type_pay, percent: cooperate_rate },
                    ]
                    const { fulfillment_status_1, fulfillment_status_2, fulfillment_status_3, fulfillment_status_4 } = this.model.fulfillment_status_arr
                    this.model.fulfillment_status_array = [
                        { type: '待发货', value: fulfillment_status_1 },
                        { type: '运输中', value: fulfillment_status_2 },
                        { type: '已签收', value: fulfillment_status_3 },
                        { type: '物流异常', value: fulfillment_status_4 },
                    ]
                    // model.sku_cooperate_pre  model.sku_cooperate_complete
                    this.model.sku_cooperate = []
                    this.model.sku_cooperate_pre = this.model.sku_cooperate_pre.map(item => {
                        item.name = '待回收'
                        return { ...item }
                    })
                    this.model.sku_cooperate_complete = this.model.sku_cooperate_complete.map(item => {
                        item.name = '已回收'
                        return { ...item }
                    })
                    const cooperate_1 = this.model.sku_cooperate_pre.length > this.model.sku_cooperate_complete.length ? this.model.sku_cooperate_pre : this.model.sku_cooperate_complete
                    const cooperate_2 = this.model.sku_cooperate_pre.length > this.model.sku_cooperate_complete.length ? this.model.sku_cooperate_complete : this.model.sku_cooperate_pre
                    cooperate_1.forEach(item => {
                        const complete = cooperate_2.find(item2 => item2.spu === item.spu) ?? {}
                        // const temp = [
                        //     { name: item.name == '待回收' ? '已回收' : '待回收', spu: item.spu, spu_count: complete?.spu_count ?? 0 },
                        //     { name: item.name, spu: item.spu, spu_count: item.spu_count },
                        // ]
                        // this.model.sku_cooperate = this.model.sku_cooperate.concat(temp)
                        const temp = {sku: item.spu, [item.name]: item.spu_count, [item.name == '待回收' ? '已回收' : '待回收']: complete?.spu_count ?? 0}
                        this.model.sku_cooperate.push(temp)
                    })
                    console.log('sku_cooperate', this.model.sku_cooperate)
                })
                .finally(() => {
                    this.loaded = false
                })
        },
    },
}
</script>
<style lang="scss">
.expert-form {
    .el-form-item {
        margin-bottom: 0;
    }
}
</style>
<style lang="scss" scoped>
.screen-bg-style {
    // background: rgb(109, 78, 163) !important;
    color: #fff;
}
.card-item {
    min-height: 190px;
}
.card-item-title {
    font-size: 72px;
    font-weight: bold;
}
.gradient-content {
    height: 327px;
    &.small {
        height: 120px;
    }
    &.full {
        height: 640px;
    }
}

//<=695的设备
@media only screen and (max-width: 695px) {
    .card-item {
        min-height: 160px;
    }
    // .card-item-title {
    //     font-size: 110px;
    // }
    .gradient-content {
        height: 320px;
        &.small {
            height: 320px;
        }
    }
    .el-col + .el-col {
        margin-top: 16px;
        margin-bottom: 0;
    }
}
</style>
